<template>
  <div>
    <h3>无限层级菜单</h3>
    <my-child :list="list"></my-child>
  </div>
</template>


<script>
import myChildVue from '../components/my-child.vue';

export default {
  components:{
    myChild:myChildVue
  },
  data() {
    return {
      list: [
        {
          id: 1,
          name: "1",
          list: [
            {
              id: 11,
              name: "1.1",
              list: [
                {
                  id: 111,
                  name: "1.1.1",
                  list: [
                    { id: 1111, name: "1.1.1.1" },
                    { id: 1112, name: "1.1.1.2" },
                  ],
                },
                {
                  id: 112,
                  name: "1.1.2",
                },
              ],
            },
            {
              id: 12,
              name: "1.2",
            },
          ],
        },
        {
          id: 2,
          name: "2",
          list: [
            { id: 21, name: "21" },
            { id: 22, name: "22" },
          ],
        },
        {
          id: 3,
          name: "3",
          list: [
            { id: 31, name: "31" },
            { id: 32, name: "32" },
          ],
        },
      ],
    };
  },
};
</script>

<style></style>
